<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>vue</title>
		<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		
		
		<div id="app" class="outer" >
			
			
			<div class="mdiv" >
				<ul id="tabTitle">
				    <li @click="cur=0" :class="{active:cur==0}">HTML5</li>
				    <li @click="cur=1" :class="{active:cur==1}">PHP</li>
				    <li @click="cur=2" :class="{active:cur==2}">Java</li>
				</ul>
			</div>
			
			<div class="mdiv2" >
				<div class="zdiv" v-show="cur==0">
				    {{id}}===HTML5
					
					
					<div v-for="item in projectTypeList" style="overflow:auto; border: 1px solid #98FB98;">
						
						<div style="line-height: 200px; display: inline-block;  margin-left: 10px; float:top;">
							{{item.deviceId}}
						</div>
						
						<div style="line-height: 200px; height:150px;  float:right;  ">
							{{item.name}}
							<img src='https://api.cz-yun.com/htcm/images/drag.jpg'  style=" height: 100%; vertical-align: middle;" />
						</div>
					</div>
				</div>
				<div class="zdiv" v-show="cur==1">
				    PHP
				</div>
				<div class="zdiv" v-show="cur==2">
				    Java
				</div>
				
			</div>
			
			
			<!-- <select v-for="item in {{projectTypeList}}" style="width: 100px">
				<option v-for="item1 in item" :value="item1.code" style="width: 100px">{{item1.parentValue}} - {{item1.value}} （{{item1.count}}）</option>
			</select> -->
		</div>
		
		
		<script>
			new Vue({
			  el: '#app',
			  data: {
				id: 'Hello Vue2.js!',
				name:'',
				cur:0,
				projectTypeList:[{deviceId:1},{deviceId:2},{deviceId:3}]
			  },
			  
			  mounted:function(){
				  //alert("1");
				  this.test_get2();//在html加载完成后进行，相当于在页面上同步显示后端数据
			  },
			  
			  methods:{
				  /* test_post:function(){
					  //发送 post 请求
					  this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
						  document.write(res.body);    
					  },function(res){
						  console.log(res.status);
					  });
				  }, */
			  
				  test_get:function(){
					  var _this= this;
					  
					  //发送get请求
					  // this.$http.get('getDeviceByDeviceId',{
							// params: {
							// 	deviceId:'865860046652351'
							// }
					  // })
					  // .then(function(res){
						 //  //document.write(res.body);   
						 //  //alert(res.body.id);
						  
						 //  _this.id = res.body.id;
						 //  _this.name = res.body.name;
						 //  _this.imgsrc = res.body.uijson;	//./images/drag.jpg		src='./images/drag.jpg'
					  // },function(){
						 //  console.log('请求失败处理');
					  // }); 
					  
					  //alert('ttt');
					  //console.log('请求失败处理');
				  },
				  
				  test_get2:function(){
					  //alert(123);
					  var _this= this;
					  
					  //发送get请求	http://192.168.50.212:8080/web2/getServerList
					  this.$http.get('http://192.168.0.104:8080/web2/getServerList',{
							params: {
								telephone:'1',
								flag:1
							}
					  })
					  .then(function(res){
						  //document.write(res.body);   
						  //alert(res.body[0].id);
						  
						  _this.id = res.body[1].deviceId;
						  _this.projectTypeList = res.body;
						  // _this.projectTypeList = [4,5,6];
					  },function(){
						  console.log('请求失败处理');
					  }); 
				  }
			  }
			  
			})
		</script>
		
		
		<style>
			/* html, */
			/* body{ 
				height:100%;
				padding: 0;
				margin: 0;
			} */
			
			#app {
				/* width: 600px; */
				/* height: 400px; */
				/* margin: 0px;
				border: 1px solid #ccc; */
				/* height: 100%; */
				/* padding: 0px 0 0; */
				/* box-sizing: border-box; */
			}
			
			
			.mdiv {
				width: 100%;
				/* height: calc(100vh - 44px); */
				height:40px;
				/* border: 0px solid #008000; */
				/* position: absolute;
				top: 30;
				left: 0; */
				/* float:left; */
			}
			
			.mdiv2 {
				height: calc(100vh - 59px);
				/* height:100%; */
				/* height:80vh; */
				/* height:100vh; */
				border: 1px solid black;
				/* overflow: scroll; */
				/* position: absolute;
				top: 10;
				left: 0; */
				margin-bottom: 0px;
			}
			
			ul{
				
				margin-left: -40px;
			}
			
			li {
				width: 70px;
				height: 20px;
				list-style: none;
				float:left;
				padding: 0px 0px;
				border: 1px solid #008000;
				margin: 0px;
				text-align:center;
			}
			
			.zdiv {
				/* width: 100vh; */
				/* height:100%; */
				
				/* clear: both; */
				margin-left: 5px;
				margin-right: 5px;
				/* display: none; */
				word-break:break-all;
				/* word-wrap:break-word; */
			
				/* min-height: 300px; */
				/* height:100vh; */
				/* height:calc(100vh - 44px); */
			}
			
			.active {
			    background: palegreen;
			}
			
			
			
			/* .tab-tilte{
				width: 90%;
			}
			.tab-tilte li{
				float: left;
				width: 25%;
				padding: 10px 0;
				text-align: center;
				background-color:#f4f4f4;
				cursor: pointer;
			}
		 
			.tab-tilte .active{
				background-color: #09f;
				color: #fff;
			}
			.tab-content div{
				float: left;
				width: 25%;
				line-height: 100px;
				text-align: center;
			} */
		</style>
		
	</body>
</html>
